﻿<html>
<head>
    <title>CSS and Jquery Tabs</title>
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $(".sidebarSecond__content").hide();
            $(".sidebarSecond__content:first").show();

            $("ul.sidebar__list li").click(function () {
                $("ul.sidebar__list li").removeClass("active");
                $(this).addClass("active");
                $(".sidebarSecond__content").hide();
                var activeTab = $(this).attr("rel");
                $("#" + activeTab).fadeIn();

            });
        });

    </script>
    
    
</head>
<body>
    <div id="maincontent">
        <div class="main-left">
            <div class="sidebar">

                <ul class="sidebar__list">
                    <li class="khuyenmai active"   rel="tab1">
                        <i class="iconkm">
                            <i class="icon icon-sidebar"></i>
                        </i>
                        <a href="#"><span>Khuyến mãi tại Lazada</span></a>
                    </li>





                    <li class="suckhoe" rel="tab2">
                        <i class="iconkm">
                            <i class="icon icon-sk"></i>
                        </i>
                        <a href="#"><span>Sức khỏe & sắc đẹp</span></a>
                    </li>




                    <li class="thoitrang" rel="tab3">
                        <i class="iconkm">
                            <i class="icon icon-tt"></i>
                        </i>
                        <a href="#"><span>Thời trang</span></a>
                        <span class="splitter">|</span>
                        <a href="#"><span>Balo & Túi xách</span></a>
                    </li>




                    <li class="mevabe" rel="tab4">
                        <i class="iconkm">
                            <i class="icon icon-mvb"></i>
                        </i>
                        <a href="#"><span>Mẹ & Bé</span></a>
                    </li>



                    <li class="dongho" rel="tab5">
                        <i class="iconkm">
                            <i class="icon icon-dh"></i>
                        </i>
                        <a href="#"><span>Đồng hồ</span></a>
                        <span class="splitter">|</span>
                        <a href="#"><span>Nữ trang</span></a>
                        <span class="splitter">|</span>
                        <a href="#"><span>Mắt kính</span></a>
                    </li>

                    <li class="bachhoa" rel="tab7">
                        <i class="iconkm">
                            <i class="icon icon-bho"></i>
                        </i>
                        <a href="#"><span>Bách hóa Online</span></a>
                        <span class="splitter">|</span>
                        <a href="#"><span>Sách & Âm nhạc</span></a>
                    </li>


                    <li class="thethao" rel="tab6">
                        <i class="iconkm">
                            <i class="icon icon-thth"></i>
                        </i>

                        <a href="#"><span>Thể thao & Dã ngoại</span></a>
                    </li>


                    <li class="dogiadung" rel="tab9">
                        <i class="iconkm">
                            <i class="icon icon-dgd"></i>
                        </i>
                        <a href="#"><span>Đồ gia dụng</span></a>
                    </li>

                    <li class="nhacua" rel="tab8">
                        <i class="iconkm">
                            <i class="icon icon-nc"></i>
                        </i>
                        <a href="#"><span>Nhà cửa & Đời sống</span></a>
                    </li>



                    <li class="dienthoai" rel="tab10">
                        <i class="iconkm">
                            <i class="icon icon-dt"></i>
                        </i>
                        <a href="#"><span>Điện thoại & Tablet</span></a>
                    </li>

                    <li class="mayvitinh" rel="tab11">
                        <i class="iconkm">
                            <i class="icon icon-mvt"></i>
                        </i>
                        <a href="#"><span>Máy vi tính & Laptop</span></a>
                    </li>

                    <li class="tv" rel="tab12">
                        <i class="iconkm">
                            <i class="icon icon-tv"></i>
                        </i>
                        <a href="#"><span>TV, Âm thanh, Thiết bị số</span></a>
                    </li>

                    <li class="mayanh" rel="tab13">
                        <i class="iconkm">
                            <i class="icon icon-ma"></i>
                        </i>
                        <a href="#"><span>Máy ảnh & Máy quay phim</span></a>
                    </li>

                    <li class="oto" rel="tab14">
                        <i class="iconkm">
                            <i class="icon icon-oto"></i>
                        </i>
                        <a href="#"><span>Ô tô, xe máy</span></a>
                    </li>
                </ul>

            </div>
        </div>
        
       
            <div class="sidebarSecond__wrapper">
                <div class="sidebarSecond__content" id="tab1">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">
                                <span style="color: #f37021; font-weight: bold; text-transform: capitalize;font-size:12px;">Khuyến mãi đặc biệt</span>
                            </a>
                        </li>


                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Alcatel Flash 2</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Voucher dịch vụ</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Siêu phẩm Hà Nội</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Hàng Việt nổi bật</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Chăm sóc nhà cửa</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Huggies giảm 30%</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">The Body Shop</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Pin sạc giá tốt</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Laptop giá rẻ</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Tivi Hot</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Túi Ví Nam đồng giá</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Đồng hồ giảm sốc</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Tập thể thao tại gia</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Deal giá sốc</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Trang thiết bị đóng gói</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#"><div style="border-bottom: 1px solid darkgray;width: 159px;color: black;"></div></a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Trả góp 0 %</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Giảm 10% thanh toán thẻ</a>
                        </li>
                        <li class="sidebarSecond__itemTitle">
                            <a href="#">Mở thẻ HSBC Tặng 2tr</a>
                        </li>
                    </ul>
                    <div class="floor__layout" id="tab1">
                        <div class="column1">
                            <div class="row1">
                                <a href="#"><img src="~/Content/images/3021_original.jpg"></a>
                            </div>
                            <div class="column11">
                                <a href="#"><img src="~/Content/images/3133_original.jpg"></a>
                                <a href="#"><img src="~/Content/images/3023_original.jpg"></a>

                            </div>

                        </div>
                        <div class="column2">
                            <a href="#"><img src="~/Content/images/3031_original.jpg"></a>
                            <a href="#"><img src="~/Content/images/3153_original.jpg"></a>
                            <a href="#"><img src="~/Content/images/3025_original.jpg"></a>
                        </div>
                    </div>
                </div>
                <div class="sidebarSecond__content" id="tab2">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            2
                        </li>
                   </ul>
                </div>
                <div class="sidebarSecond__content" id="tab3">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            3
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab4">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            4
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab5">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            5
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab6">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            6
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab7">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            7
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab8">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            8
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab9">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            9
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab10">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            10
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab11">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            11
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab12">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            12
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab13">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            13
                        </li>
                    </ul>
                </div>
                <div class="sidebarSecond__content" id="tab14">
                    <ul class="sidebarSecond__list">
                        <li class="sidebarSecond__itemTitle">
                            14
                        </li>
                    </ul>
                </div>
            </div>
        
            
        
    </div>
        
       @* <div class="main-right">

        </div>
   *@
        
    





    


    
</body>
</html>